$(function() {
    $('.searchbox .att').on('click', function() {
        $('.searchbox .att').removeClass('btn-info');
        $(this).addClass('btn-info')
    })
    class TimeUtils {
        formatDate(n) {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            month = month >= 10 ? month : '0' + month;
            let day = date.getDate();
            day = day >= 10 ? day : '0' + day;
            let hours = date.getHours();
            hours = hours >= 10 ? hours : '0' + hours;
            let minutes = date.getMinutes();
            minutes = minutes >= 10 ? minutes : '0' + minutes;
            let seconds = date.getSeconds();
            seconds = seconds >= 10 ? seconds : '0' + seconds;
            if (day - n < 0) {
                day = day + 30;
                month--
            }
            return `${year}-${month}-${day-n}`;
        }
    }
    let timeUtils = new TimeUtils;
    console.log(timeUtils.formatDate(0))
    $('.dater').val(timeUtils.formatDate(7))
    $('.datef').val(timeUtils.formatDate(0))

    new Chart($("#chart-vbar-2"), {
        type: 'bar',
        data: {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            datasets: [{
                    label: "订单金额(万元)",
                    backgroundColor: "rgba(51,202,185,0.5)",
                    borderColor: "rgba(0,0,0,0)",
                    hoverBackgroundColor: "rgba(51,202,185,0.7)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [10, 59, 80, 58, 20, 55, 40, 60, 58, 36, 155, 45]
                },
                {
                    label: "退单金额(百元)",
                    backgroundColor: "rgba(185, 17, 45, 0.8)",
                    borderColor: "rgba(0,0,0,0)",
                    hoverBackgroundColor: "rgba(238,239,240,1)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [28, 48, 40, 19, 86, 27, 90, 80, 58, 20, 125, 40]
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    $('.nextpage').on('click', function() {
        if ($('.active  a').text() == 9) {
            return
        };
        $('.pagination-circle  .active').removeClass('active').next('li').addClass('active');
    })
    $('.prevpage').on('click', function() {
            if ($('.active  a').text() == 1) {
                return
            };
            $('.pagination-circle  .active').removeClass('active').prev('li').addClass('active');
        })
        /****************以下为引入外部日历插件动画 */
    var pages = document.querySelector('.pages');
    var locale = window.navigator.language || 'en-us';

    var date = new Date();
    var dayNum = date.getDate();
    var month = date.getMonth();
    var dayName = date.toLocaleString(locale, { weekday: 'long' });
    var monthName = date.toLocaleString(locale, { month: 'long' });
    var year = date.getFullYear();

    function daysInMonth(month, year) {
        return new Date(year, month + 1, 0).getDate();
    }

    function getNewDate() {
        if (dayNum < daysInMonth(month, year)) {
            dayNum++;
        } else {
            dayNum = 1;
        }
        if (dayNum === 1 && month < 11) {
            month++;
        } else if (dayNum === 1 && month === 11) {
            month = 0;
        }
        if (dayNum === 1 && month === 0) {
            year++;
        }
        var newDate = new Date(year, month, dayNum);
        dayName = newDate.toLocaleString('zh-cn', { weekday: 'long' });
        monthName = newDate.toLocaleString('zh-cn', { month: 'long' });
    }

    function handleClick(e) {
        getNewDate();
        updateCalendar(e.target);
    }

    function updateCalendar(target) {
        if (target && target.classList.contains('page')) {
            target.classList.add('tear');
            setTimeout(function() {
                pages.removeChild(target);
            }, 800);
        } else {
            return;
        }
        renderPage();
    }

    function renderPage() {
        var newPage = document.createElement('div');
        newPage.classList.add('page');
        newPage.innerHTML = '\n    <p class="month">' +
            monthName + '</p>\n    <p class="day">' +
            dayNum + '</p>\n    <p class="day-name">' +
            dayName + '</p>\n    <p class="year">' +
            year + '</p>\n  ';

        pages.appendChild(newPage);
    }

    renderPage();

    pages.addEventListener('click', handleClick);
})